<template>
  <div class="product-list">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <van-search
        v-model="searchText"
        placeholder="搜索眼镜"
        shape="round"
        background="#ffffff"
        @search="onSearch"
      />
    </div>

    <!-- 分类标签 -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部" name="all" />
      <van-tab title="太阳镜" name="sunglasses" />
      <van-tab title="光学镜" name="optical" />
      <van-tab title="隐形眼镜" name="contact" />
    </van-tabs>

    <!-- 商品列表 -->
    <div class="products-container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="products-grid">
            <div v-for="product in products" :key="product.id" class="product-card">
              <div class="product-image">
                <img :src="product.image" :alt="product.name">
                <div class="product-tags">
                  <span v-if="product.isNew" class="tag new">新品</span>
                  <span v-if="product.isHot" class="tag hot">热销</span>
                </div>
              </div>
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <div class="product-specs">
                  <span class="spec">{{ product.specs }}</span>
                </div>
                <div class="product-price-row">
                  <div class="price">
                    <span class="currency">¥</span>
                    <span class="amount">{{ product.price }}</span>
                  </div>
                  <van-button 
                    type="primary" 
                    size="small" 
                    class="add-to-cart"
                    @click="addToCart(product)"
                  >
                    加入购物车
                  </van-button>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useCartStore } from '../stores/cart.js'
import { showToast } from 'vant'

const cartStore = useCartStore()
const searchText = ref('')
const activeTab = ref('all')
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const products = ref([])

// 模拟商品数据
const mockProducts = [
  {
    id: 1,
    name: '经典飞行员太阳镜',
    price: 299,
    image: '../assets/1.jpg',
    specs: '偏光镜片 | 防紫外线',
    isNew: true,
    isHot: true
  },
  {
    id: 2,
    name: '复古圆形光学镜',
    price: 399,
    image: 'https://img.alicdn.com/imgextra/i1/2200726525386/O1CN01DMRoWA1TfMYMk7ebQ_!!2200726525386.jpg',
    specs: '防蓝光 | 超轻镜框',
    isNew: false,
    isHot: true
  },
  {
    id: 3,
    name: '日抛隐形眼镜',
    price: 99,
    image: 'https://img.alicdn.com/imgextra/i4/2200726525386/O1CN01nCpuWx1TfMYKNzKkt_!!2200726525386.jpg',
    specs: '30片装 | 高透氧',
    isNew: true,
    isHot: false
  },
  {
    id: 4,
    name: '商务半框眼镜',
    price: 599,
    image: 'https://img.alicdn.com/imgextra/i2/2200726525386/O1CN01q1hAVp1TfMYLsIWdx_!!2200726525386.jpg',
    specs: '钛合金 | 防蓝光',
    isNew: false,
    isHot: false
  }
]

// 搜索处理
const onSearch = (val) => {
  console.log('搜索:', val)
  // TODO: 实现搜索功能
}

// 加载更多
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      refreshing.value = false
      products.value = []
    }
    products.value.push(...mockProducts)
    loading.value = false
    if (products.value.length >= 20) {
      finished.value = true
    }
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}

// 添加到购物车
const addToCart = (product) => {
  cartStore.addItem(product)
  showToast('已添加到购物车')
}

onMounted(() => {
  onLoad()
})
</script>

<style scoped>
.product-list {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 100;
}

.products-container {
  padding: 12px;
  box-sizing: border-box;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
  box-sizing: border-box;
}

.product-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background-color: #f7f8fa;
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-tags {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}

.tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}

.tag.new {
  background-color: #07c160;
}

.tag.hot {
  background-color: #ff4d4f;
}

.product-info {
  padding: 12px;
  box-sizing: border-box;
}

.product-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #323233;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 40px;
}

.product-specs {
  margin: 4px 0;
}

.spec {
  font-size: 12px;
  color: #969799;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.price {
  color: #ee0a24;
}

.currency {
  font-size: 12px;
}

.amount {
  font-size: 16px;
  font-weight: 500;
}

.add-to-cart {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 14px;
}

:deep(.van-tabs__wrap) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.van-tab) {
  font-size: 14px;
}

:deep(.van-search) {
  padding: 8px 12px;
}
</style> 